<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>全部圈子</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/font-awesome-4.3.0/css/font-awesome.min.css" />
		<!--<link href="../css/config.css" rel="stylesheet" />-->
		<link href="../css/base.css" rel="stylesheet" />
		<link href="../css/index.css" rel="stylesheet" />
		<link href="../css/circle.css" rel="stylesheet" />
		<style>
				/*search部分*/
			
			.mui-search input[type=search] {
				width: 90%;
				margin-left: 5%;
				background-color: white;
				margin-bottom: 10px;
			}
			
			.mui-search:before {
				left: 5%;
				margin-left: 15px;
				color: gray;
				top: 24px;
			}
			
			.mui-input-row .mui-input-clear~.mui-icon-clear {
				right: 11px!important;
				color: gray;
			}
			
			.mui-search .mui-placeholder .mui-icon {
				color: gray;
				padding: 6px!important;
			}
			/*search部分 end*/
			
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 100%;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
			
			.mui-search .mui-placeholder {
				top: 0px;
				line-height: 34px;
				height: 34px;
			}
			
			.mui-search .mui-placeholder span {
				float: none;
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav km-navbar white-header" style="box-shadow:none;">
			<a class="mui-icon mui-icon-back mui-pull-left mui-action-back"></a>
			<h1 id="title" class="mui-title km-view-title">全部圈子</h1>
			<!--<a class="mui-icon mui-icon-search mui-pull-right" ontouchstart='openWindow("circle-search.html", "circle-search.html");'></a>-->
		</header>
		<div class="mui-content3 mui-row mui-fullscreen">
			<div class="content-temp" class="content-temp">
				<div style="padding-top: 10px;">
					<div class="mui-input-row mui-search">
						<input type="search" id="txt_keyword" oninput="Search()" class="mui-input-clear" placeholder="">
					</div>
				</div>
			</div>
			<div class="mui-col-xs-3 circle-cate">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9 circle-list" style="border-left: 1px solid #c8c7cc;">
				<div id="item1" class="mui-control-content mui-active">
				</div>
				<div id="item2" class="mui-control-content">
				</div>
				<div id="item3" class="mui-control-content">
				</div>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/Global.js"></script>
	<script src="../js/zepto.min.js"></script>
	<script>
		mui.init({
			swipeBack: true,
			statusBarBackground: '#f7f7f7',
			statusBarStyle: 'UIStatusBarStyleDefault'
		});
		mui('.mui-scroll-wrapper').scroll();
		var controls = document.getElementById("segmentedControls");
		var contents = document.getElementById("segmentedControlContents");
		var html = [];
		var i = 1,
			j = 1,
			m = 16, //左侧选项卡数量+1
			n = 21; //每个选项卡列表数量+1
		for (; i < m; i++) {
			html.push('<a class="mui-control-item" href="#content' + i + '">选项' + i + '</a>');
		}
		controls.innerHTML = html.join('');
		html = [];
		for (i = 1; i < m; i++) {
			html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
			for (j = 1; j < n; j++) {
				html.push('<li class="mui-table-view-cell"><div class="circle-list"><a class="img-a"><img src="../img/example1.png" /></a><dl><dt>圈子' + i + '</dt><dd><i class="mui-icon mui-icon-person"></i>2156<a class="circle-jiaru mui-icon mui-icon-plusempty" ontouchstart="jiaruCircle()"></a></dd></dl></div></li>');
			}
			html.push('</ul></div>');
		}
		contents.innerHTML = html.join('');
		//默认选中第一个
		controls.querySelector('.mui-control-item').classList.add('mui-active');
		contents.querySelector('.mui-control-content').classList.add('mui-active');

		function jiaruCircle() {
			var rs = $(event.currentTarget);
			if (rs.hasClass("mui-icon-plusempty")) {
				rs.removeClass("mui-icon-plusempty").addClass("mui-icon-checkmarkempty");
			} else {
				rs.removeClass("mui-icon-checkmarkempty").addClass("mui-icon-plusempty");
			}
		}
	</script>

</html>